<template>
  <div>
    <!-- <header-top></header-top> -->
    <el-row type="flex" class="container">
      <!-- 作者信息 -->
      <el-col class="pd-sm">
        <div class="card">
          <div class="profile-wrap">
            <div class="author">
              <div class="avatar">
                <img :src="authorInfo.avatar" :alt="authorInfo.name" />
              </div>
              <div class="info">
                <h3 class="name">{{ authorInfo.name }}</h3>
                <vue-typed-js
                  :strings="[authorInfo.motto]"
                  :startDelay="100"
                  :backDelay="100"
                  :typeSpeed="80"
                  :backSpeed="80"
                  :cursorChar="'_'"
                  :loop="true"
                >
                  <span class="typing"></span>
                </vue-typed-js>
              </div>
            </div>
            <div class="info-list">
              <div class="item" @click="showEssays">
                <div class="number">{{ authorInfo.essays }}</div>
                <span>文章</span>
              </div>
              <div class="item">
                <div class="number">{{ authorInfo.collections }}</div>
                <span>收藏</span>
              </div>
              <div class="item">
                <div class="number">{{ authorInfo.comments }}</div>
                <span>问答</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 内容 -->
      <el-col class="pd-sm">
        <component :is="component[componentId]" v-bind="compProps"></component>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import HeaderTop from "@/components/Header";
import Detail from "@/views/article/detail";
import List from "@/views/article/list";
import VueTypedJs from "vue-typed-js";
import request from "@/utils/request";
import { parseToken } from "@/utils/auth";
import { Message } from "element-ui";
import validator from "@/utils/validator";

export default {
  name: "",
  components: {
    HeaderTop,
  },
  data() {
    return {
      authorInfo: {
        name: "Polaris",
        motto: "愿你归来仍是少年",
      },
      component: {
        list: List,
        detail: Detail,
      },
      componentId: "list",
      compProps: {},
    };
  },
  methods: {
    /**
     * 获取作者信息
     */
    getAuthor() {
      const params = this.$route.params;
      request.get(`/user/author?author=${params.author}`).then((res) => {
        this.authorInfo = res.data;
      });
    },
    changeComponent(obj) {
      if (validator.isString(obj)) {
        this.componentId = obj;
      } else if (validator.isObject(obj)) {
        this.componentId = obj.componentId;
        switch (this.componentId) {
          case "list":
            this.compProps = {
              author: obj.author,
            };
            break;
          case "detail":
            this.compProps = {
              articleId: obj.articleId,
            };
            break;
          case "collection":
            break;
        }
      }
    },
    showEssays() {
      this.changeComponent({
        componentId: 'list',
        author: this.$route.params.author
      });
    }
  },
  created() {
    this.getAuthor();
    const id = this.$route.params.articleId;
    const author = this.$route.params.author;
    if (!isNaN(id)) {
      this.changeComponent({
        componentId: "detail",
        articleId: id,
      });
    } else if (id === undefined) {
      this.changeComponent({
        componentId: "list",
        author: author,
      });
    } else {
      this.$router.push("/404");
    }
  },
};
</script>

<style scope>
  .container {
    width: 80%;
    display: flex;
    flex-direction: column;
    margin: auto;
  }
  .mb-sm {
    margin-bottom: 1rem;
  }
  .pd-sm {
    padding: 10px;
  }

  .profile-wrap .author {
    display: flex;
    padding: 15px;
    text-align: center;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  .profile-wrap .author .avatar img {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
  }
  .profile-wrap .author .info {
    text-align: center;
    height: 64px;
  }
  .profile-wrap .author .name {
    color: #5fb878;
    font-size: 1.2rem;
    padding: 5px 0;
  }
  .profile-wrap .author .motto {
    font-size: 0.8rem;
    position: relative;
  }
  .profile-wrap .author .motto::after {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -2px;
    animation: flash 0.2s ease-in-out infinite;
  }
  .profile-wrap .info-list {
    border-top: 1px dashed #f0f0f0;
    text-align: center;
    border-radius: 2px;
    padding: 5px 0;
  }
  .profile-wrap .info-list .item {
    display: inline-block;
    position: relative;
    border-radius: 2px;
    color: #9fd0ad;
    cursor: pointer;
    padding: 5px 15px;
  }
  .profile-wrap .info-list .item:hover {
    background-color: #f8f8f8;
  }
  .profile-wrap .info-list .item .number {
    font-weight: 600;
    font-size: 1.1rem;
    color: #074b60;
  }
  .profile-wrap .info-list .item span {
    font-size: 0.9rem;
  }
</style>